<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>_Widget.placeAt tests</title>

	<!-- test decoration styles -->
	<style type="text/css">
		@import "../../dojo/resources/dojo.css";
		@import "../../dijit/tests/css/dijitTests.css";
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/tundra/tundra.css">

	<!-- required: load the dojo base -->
	<script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
	<!-- for theme-switching, only for dijit -->
	<script type="text/javascript" src="../../dijit/tests/_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("doh.runner");

		// load componenets need for this test
		dojo.require("dijit.form.Button");
		dojo.require("dijit.layout.TabContainer");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.BorderContainer");

		// run all the tests onload
		dojo.addOnLoad(function(){

			var pane1, pane2, tc;

			doh.register("dijit.tests.placeAt",
				[
					function placeAsDOMNodeChild(){
						// create a tabcontainer
						tc = new dijit.layout.TabContainer({
							style: "height:200px; width:200px"
						}, "tabContainerThinger").placeAt("container");

						doh.is(dojo.byId("container"), tc.domNode.parentNode, "TabContainer is child of container");
					},

					function placeAsWidgetChild(){
						// add the child to the tabcontainer now:
						pane1 = new dijit.layout.ContentPane({ title:"empty" }).placeAt(tc);

						doh.is(pane1, tc.getChildren()[0], "pane1 is child of TabContainer");
					},

					function placeAsWidgetChildOrdered(){
						// add this child (created second) as the first tab:
						pane2 = new dijit.layout.ContentPane({ title:"first" }).placeAt(tc, 0);

						doh.is(pane2, tc.getChildren()[0], "pane2 is new first child of TabContainer");
						doh.is(pane1, tc.getChildren()[1], "pane1 is now second child of TabContainer");
					},

					function startup(){
						// just starting the TabContainer so we can do some more tests
						tc.startup();
						tc.selectChild(pane2);
					},

					function placeAsFirst(){
						pane2.attr("content","button should appear BEFORE this text");

						// create a button, and add it to pane2 before the above text
						var button = new dijit.form.Button({
							label:"alert",
							onClick: function(){
								alert('woot');
							}
						}).placeAt(pane2.containerNode, "first");

						doh.is(button.domNode, pane2.containerNode.firstChild, "button is first child");
						doh.is(3, button.domNode.nextSibling.nodeType, "button went before other content");
					},

					function placeBefore(){
						// and a button, this time we'll place it before the tabcontainer's dom
						var otherButton = new dijit.form.Button({
							label:"destroy tabContainer",
							onClick:function(){
								tc.destroyRecursive();
							}
						}).placeAt(tc.domNode, "before");

						doh.is(tc.domNode, otherButton.domNode.nextSibling, "otherButton is before tab container");
					}
				]
			);
			doh.register("dijit.tests.placeAt BorderContainer",
				[
					function addPanes(){
						// Add top and left pane
						dijit.byId("addStuff").onClick();

						var bc = dijit.byId("bc1");
						doh.is("<p>wowzers</p>", bc._left.innerHTML.toLowerCase(), "left pane");
						doh.is("<div>some html text</div>", bc._top.innerHTML.toLowerCase(), "top pane");
					}
				]
			);
			doh.run();
		});
	</script>
</head>
<body class="tundra">
	<h1 class="testTitle">_Widget.placeAt tests</h1>

	<div id="container">

	</div>

	<h2>Node2</h2>
	<p>This is where the tab srcNodeRef is, but it gets moved above us into the id="container" div.  (Should be there already.)</p>
	<div id="otherContainer">
		<div id="tabContainerThinger"></div>
	</div>

	<h2>BorderContainer sample</h2>
	<div id="bc1" dojoType="dijit.layout.BorderContainer" style="width:600px; height:400px">
		<div dojoType="dijit.layout.ContentPane" region="center">
			<button id="addStuff" dojoType="dijit.form.Button">
				Add Stuff
				<script type="dojo/method" event="onClick">
					this.attr("disabled", true);
					var bc = dijit.byId("bc1");

					// add a left pane and add content
					new dijit.layout.ContentPane({
						region:"left",
						style:"width:100px"
					}).placeAt(bc).attr("content","<p>wowzers</p>");

					// add a top pane, and add content
					new dijit.layout.ContentPane({
						region:"top",
						style:"height:100px"
					}).placeAt(bc).attr("content","<div>some HTML text</div>");

				</script>
			</button>
		</div>
	</div>

</body>
</html>
